<!-- Page header -->
<style>
.container {
 height: 180px;
 overflow-y: scroll;
margin-top: 80px;
}
.data, th, td {
 border: 1px solid black;
 border-collapse: collapse;
 padding: 4px;

}

#myChart1{
	margin-top: 100px;
}
  
</style>


<!-- Page body -->

<div class="container">
	<div>查看睡眠问卷测评分数：</div>
	<hr>
	<table border="1px" id="tab1" class="data">
		<thead>
			<tr>
				<th>序号&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
				<th>测试时间&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
				<th>PSQI总分&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
				<th>睡眠质量&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
				<th>入睡时间&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
				<th>睡眠时间&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
				<th>睡眠效率&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
				<th>睡眠障碍&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
				<th>催眠药物&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
				<th>日间功能障碍&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
				<th>结果&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
			</tr>
		</thead>
		<tbody id = "tb"></tbody>
	</table>
</div>

<canvas id="myChart1" width="600" height="130"></canvas>

<script>

  $(function() {

	$.ajax({
      type : 'get',
      url : 'sleep/selectAll',
      success : function(respDate) {
        
        //判断状态码
        if(respDate.code == 0) {
         //构造页面
		 buidHistoryHtml(respDate.data);
		 getValue(respDate.data);
        }else {
          $.toast({
            heading: '警告',
            text: respDate.message,
            icon: 'warning' 
          });
        }
      },
      error : function() {
        $.toast({
          heading: '错误',
          text: '服务器错误，请联系管理员',
          icon: 'error' 
        });
      }

    });

	function buidHistoryHtml(data) {
		let table = document.getElementById("tab1");
		let newRow = table.insertRow();

		let tbody = document.getElementById('tb');

		

		
		for(let i = 0; i < data.length; i++) {

			var trow = getDataRow(data[i]);
			tbody.appendChild(trow);
		}
	}

	function getDataRow(h){  
     var row = document.createElement('tr'); //创建行  
       
     var cellId = document.createElement('td'); //创建第一列id  
     cellId.innerHTML = h.id; //填充数据  
     row.appendChild(cellId); //加入行  ，下面类似  
       
     var cellCreateState = document.createElement('td');//创建第二列name  
     cellCreateState.innerHTML = h.createState;  
     row.appendChild(cellCreateState);  

	 var cellScore = document.createElement('td');//创建第三列job  
     cellScore.innerHTML = h.score;  
     row.appendChild(cellScore);  

	 var cellQuality = document.createElement('td');//创建第三列job  
     cellQuality.innerHTML = h.quality;  
     row.appendChild(cellQuality);  
       
    
	 var cellAsleep = document.createElement('td');//创建第三列job  
     cellAsleep.innerHTML = h.asleep;  
     row.appendChild(cellAsleep);  

	 var cellSleepTime = document.createElement('td');//创建第三列job  
     cellSleepTime.innerHTML = h.sleepTime;  
     row.appendChild(cellSleepTime);  

	 var cellSleepEfficiency = document.createElement('td');//创建第三列job  
     cellSleepEfficiency.innerHTML = h.sleepEfficiency;  
     row.appendChild(cellSleepEfficiency);  

	 var cellSleepDisturbances = document.createElement('td');//创建第三列job  
     cellSleepDisturbances.innerHTML = h.sleepDisturbances;  
     row.appendChild(cellSleepDisturbances);  

	 var cellHypnoticDrugs = document.createElement('td');//创建第三列job  
     cellHypnoticDrugs.innerHTML = h.hypnoticDrugs;  
     row.appendChild(cellHypnoticDrugs);  

	 var cellDysfunction = document.createElement('td');//创建第三列job  
     cellDysfunction.innerHTML = h.dysfunction;  
     row.appendChild(cellDysfunction);  

	 var cellResult= document.createElement('td');//创建第三列job  

	 let num = h.score;
	 if(num >=0 && num < 6) {
		cellResult.innerHTML = "睡眠质量很好";
	 } else if (num >=6 && num < 11) {
		cellResult.innerHTML = "睡眠质量较好";
	 }else if (num >=11 && num < 16) {
		cellResult.innerHTML = "睡眠质量一般";
	 }else {
		cellResult.innerHTML = "睡眠质量很差";
	 }
     row.appendChild(cellResult);  


	 return row; //返回tr数据      
 }      

 function getValue(postData) {
	const ctx = document.getElementById('myChart1');
	const labels = [];
	const quality = [];
	const asleep = [];
	const sleepTime = [];
	const sleepEfficiency = [];
	const sleepDisturbances = [];
	const hypnoticDrugs = [];
	const dysfunction = [];
	

	for(let i = 0; i < postData.length; i++) {
		labels[i] = postData[i].createState;
		quality[i] = postData[i].quality;
		asleep[i] = postData[i].asleep;
		sleepTime[i] = postData[i].sleepTime;
		sleepEfficiency[i] = postData[i].sleepEfficiency;
		sleepDisturbances[i] = postData[i].sleepDisturbances;
		hypnoticDrugs[i] = postData[i].hypnoticDrugs;
		dysfunction[i] = postData[i].dysfunction;
	}

	console.log("查看数据结构集");
	console.log(labels);
	console.log(quality);
	console.log(asleep);
	console.log(sleepTime);
	console.log(sleepEfficiency);
	console.log(sleepDisturbances);
	console.log(hypnoticDrugs);
	console.log(dysfunction);

	if(postData.length == 0) {
		console.log("没有测评数据！");
		alert("您目前还没有该份问卷的测评记录，请先进行填写问卷！");
		return 0;
	} else {
		console.log("有一条以上的数据！");
		const data = {
			labels: labels,
			datasets: [
				{
				label: '睡眠质量',
				data: quality,
                fill: false,
                borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '入睡时间',
				data: asleep,
                fill: false,
                borderColor: 'rgb(255, 51, 100)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '睡眠时间',
				data: sleepTime,
                fill: false,
                borderColor: 'rgb(255, 51, 190)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '睡眠效率',
				data: sleepEfficiency,
                fill: false,
                borderColor: 'rgb(175, 51, 255)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '睡眠障碍',
				data: sleepDisturbances,
                fill: false,
                borderColor: 'rgb(51, 255, 141)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '催眠药物',
				data: hypnoticDrugs,
                fill: false,
                borderColor: 'rgb(184, 255, 51)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '日间功能障碍',
				data: dysfunction,
                fill: false,
                borderColor: 'rgb(255, 193, 51)', // 设置线的颜色
                tension: 0.1
			   }
			]
		};
		const config = {
			type: 'line', // 设置图表类型
			data: data,
		};
		console.log("-------------------");
		const myChart = new Chart(ctx, config);
	}
 }


});
  
  
</script>